<template>
  <div class="new-card">
    <div class="colors" v-show="id==0">
        <p class="color-li" v-for="(e,index) in cardColor1" :key="index" :style="{background:e}" :class="{colorselected:index==colorSelected}" @click="changeColor(index)"></p>
    </div>
    <!-- 照片 -->
    <div class="add-photo" v-if="id==1">
        <input type="file" name="file" id="file" multiple="multiple" @change="showPhoto" />
        <div class="add-bt" v-if="url==''">
            <img src="@/assets/images/添加.png" alt="">
        </div>
        <div class="change-bt" v-if="url!=''">
            <img src="@/assets/images/修改.png" alt="">
        </div>
        <div class="photo-div"><img :src="url"></div>
    </div>
    <!-- 卡片 -->
    <div class="card-main" :style="{background:id==0?cardColor[colorSelected]:cardColor[5]}">
        <textarea placeholder="留言..." class="message" maxlength="96" v-model="message"></textarea>
        <input type="text" placeholder="签名" class="name" v-model="name"/>
    </div>
    <div class="label">
        <p class="title">选择标签</p>
    <div class="labels">
        <p v-for="(e,index) in label[id]" :key="index" class="label-li" :class="{labelselected:index==labelSelected}" @click="changeLabel(index)">{{ e }}</p>
    </div> 
    </div>
    <div>
        <p class="title">免责声明</p>
        <p class="mzsm">
            留言墙是有本人独自开发的，为便于用户交流的留言平台。请不要利用此平台服务制作、上传有关如下：
            1.反对宪法所确定的基本原则的;<br>
            2.危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的<br>
            3.损害国家荣誉和利益的<br>
            4.煽动民族仇恨、民族歧视，破坏民族团结的<br>
            5.破坏国家宗教政策，宣扬邪教和封建迷信的<br>
            6.散步谣言，扰乱社会秩序，破坏社会稳定的；<br>
            7.散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的<br>
            8.侮辱或者诽谤他人，侵害他人合法权益的<br>
            9.含有法律、行政法规禁止的其他内容的信息。

        </p>
    </div>
    <div class="footbt">
        <lg-button nom="secondary" size="max" @click="closeModal">关闭</lg-button>
        <lg-button class="submit" size="max" @click="submit()">确定</lg-button>
    </div>
  </div>
</template>

<script>
import {cardColor,cardColor1, label} from '@/utils/data'
import LgButton from './LgButton.vue'
import { getObjectURL } from '@/utils/lgmethod';
import { insertWallApi,profileApi } from '@/api/index';
export default {
  components: { LgButton },
    data(){
        return{
            cardColor,
            cardColor1,
            colorSelected:0,
            label,
            labelSelected:0,
            message:'',   //留言信息
            name:'',
            user:this.$store.state.user,
            url:''
           
        }
    },
    props:{
        id:{
            default:0
        }
    },
    computed:{
        LgButton
    },
    methods:{
        //点击切换颜色
        changeColor(e){
            this.colorSelected=e
        },
        //点击切换标签
        changeLabel(u){
            this.labelSelected=u
        },
        //关闭窗口
        closeModal(data){
            this.$emit('addClose',data)
        },
        //提交新建wall
        submit(){
            let name='匿名';
            if(this.name){
                name=this.name
            }
            let data={
                type:this.id,
                message:this.message,
                name:name,
                userId:this.user.id,
                moment:new Date(),
                label:this.labelSelected,
                color:5,
                imgurl:''
            };
            // console.log(data)
            if(this.message && this.id==0){
                data.color=this.colorSelected,
                insertWallApi(data).then((res)=>{
                    // console.log(res);
                    let cardD={
                        type:this.id,
                        message:this.message,
                        name:name,
                        userId:this.user.id,
                        moment:new Date(),
                        label:this.labelSelected,
                        color:this.colorSelected,
                        imgurl:'',
                        id:res.message.insertId,
                        islike:[{count:0}],
                        like:[{count:0}],
                        comcount:[{count:0}],
                        report:[{count:0}],
                        revoke:[{count:0}],
                    }
                    this.$emit("clickbt",cardD);
                    this.message='';
                })
            }else if(this.id==1 && this.url){
                this.updataPhoto(data);
        }
    },
        //图片显示
        showPhoto(){
            let aa=getObjectURL(document.getElementById('file').files[0]);
            this.url=aa
        },
        //图片提交
        updataPhoto(data){
            let file=document.getElementById('file')
            if(file.files.length>0){
                let formData=new FormData();
                formData.append('file',file.files[0]);

                //提交后端
                profileApi(formData).then((res)=>{
                    console.log(res);
                    data.imgurl=res
                    //数据存数据库
                    insertWallApi(data).then((result)=>{
                    // console.log(res);
                    let cardD={
                        type:this.id,
                        message:this.message,
                        name:data.name,
                        userId:this.user.id,
                        moment:new Date(),
                        label:this.labelSelected,
                        color:5,
                        imgurl:data.imgurl,
                        id:result.message.insertId,
                        islike:[{count:0}],
                        like:[{count:0}],
                        comcount:[{count:0}],
                        report:[{count:0}],
                        revoke:[{count:0}],
                    }
                    this.$emit("clickbt",cardD);
                    this.message='';
                })
            })                
        }
        },
    }
}
</script>

<style lang="less" scoped>
@import url(/src/styles/commons.less);
.new-card{
    padding: 0 @padding-20 100px;
    position: relative;
    .colors{
        padding-bottom: 12px;
        display: flex;
        align-items: center;
        .color-li{
            width: 24px;
            height: 24px;
            margin-right: @padding-8;
        }
        .colorselected{
            border: 1px solid @primary-color;
        }
    }
    .card-main{
        height: 240px;
        width: 100%;
        padding:12px;
        box-sizing: border-box;
        .message{
            background: none;
            border: none;
            resize:none;
            padding: @padding-8;
            box-sizing: border-box;
            height: 172px;
            width:100%;
            font-size: 15px;
        }
        .name{
            width: 100%;
            box-sizing: border-box;
            padding: @padding-8;
            background: none;
            border: #fff 1px solid;
            line-height: 20px;
            font-size: 15px;
        }
    }
    .title{
        color:@gray-1;
        font-weight: 600;
        padding-top: 30px;
        padding-bottom: 2px;
        margin-left: 16px;
    }
    .labels{
        display: flex;
        flex-wrap: wrap;
        width:320px;
        margin-left: 16px;
        .label-li{
            padding: 2px 10px;
            border-radius: 20px;
            margin: 16px 4px 0 0;
            cursor: pointer;
            color: @gray-2;
        }
        .labelselected{
            background: #EBEBEB;
            font-weight: 600;
            color: @gray-1;
        }
    }
    .mzsm{
        padding-top:10px ;
        font-size: 12px;
        color:@gray-3;
    }
    .add-photo{
        padding-bottom:20px ;
        position: relative;
        #file{
            position: absolute;
            z-index:10;
            top: -10px;
            height: 74px;
            width: 64px;
            opacity: 0;
            cursor: pointer;
        }
        .add-bt{
            width: 64px;
            height: 64px;
            border: 1px solid @gray-3;
            border-radius: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            img{
                width: 30px;
                height: 30px;
            }
        }
        .photo-div{
            max-height: 200px;
            width: 100%;
            background: #333;
            overflow: hidden;
            display: flex;
            align-items: center;
            img{
                width: 100%;
            }
        }
        .change-bt{
            position: absolute;
            top:12px;
            left: 12px;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background: rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                height: 20px;
                width: 20px;
            }
        }
    }
    .footbt{
        left: 0;
        padding:@padding-20;
        box-sizing: border-box;
        background: rgba(255,255,255,0.6);
        width: 100%;
        position: fixed;
        bottom: 52px;
        .submit{
            margin-left: @padding-20;
            width: 200px;
        }
    }
}
</style>